<!-- 角色权限详细及修改 -->
<template>
	<div id="rolepermismanageshow">
		<el-dialog title="角色权限详细及修改" :visible.sync="dialogFormVisible" append-to-body custom-class="my_dialog">
			<!-- 人员树 -->
			<el-tag class="el-tabs1" @close="userhandleClose(userstagsobj.id)" v-for="userstagsobj in userstags"
				:key="userstagsobj.id" size="mini" closable :type="userstagsobj.type">
				{{userstagsobj.name}}
			</el-tag>
			<br />
			<!-- 部门树 -->
			<el-tag class="el-tabs2" @close="sectionhandleClose(sectionagsobj.id)" v-for="sectionagsobj in sectionags"
				:key="sectionagsobj.id" size="mini" closable :type="sectionagsobj.type">
				{{sectionagsobj.name}}
			</el-tag>
			<br />
			<!-- 岗位树 -->
			<el-tag class="el-tabs3" @close="posthandleClose(postagsobj.id)" v-for="postagsobj in postags"
				:key="postagsobj.id" size="mini" closable :type="postagsobj.type">
				{{postagsobj.name}}
			</el-tag>
			<br />
			<el-tabs v-model="activeName" @tab-click="handleClick">
				<el-tab-pane label="人员" name="first">
					<usertreeVue :upuserobj="upuserstags" ref="refuserstreeVue">
					</usertreeVue>
				</el-tab-pane>
				<el-tab-pane label="部门" name="second">
					<sectiontreeVue :sectionobj="upsectionags" ref="refsectiontreeVue"></sectiontreeVue>
				</el-tab-pane>
				<el-tab-pane label="岗位" name="third">
					<posttreeVue :postobj="uppostags" ref="refposttreeVue"></posttreeVue>
				</el-tab-pane>
			</el-tabs>


			<div slot="footer" class="dialog-footer">
				<el-button @click="dialogFormVisible = false">取 消</el-button>
				<el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
			</div>
		</el-dialog>

	</div>
</template>

<script>
	import posttreeVue from './posttree.vue'
	import sectiontreeVue from './sectiontree.vue'
	import usertreeVue from './usertree.vue'



	export default {
		name: "rolepermismanageshow",
		data() {
			return {
				dialogFormVisible: false,
				activeName: 'first',
				roleid: 0,
				userstags: [],
				sectionags: [],
				postags: []
			}
		},
		methods: {
			updialogFormVisible(s, roleid) { //父组件调用，用来显示这个dialog并可以传参数
				this.dialogFormVisible = s
				this.roleid = roleid
				//根据roleid去获取后端对应的资源权限菜单树集合
			},
			handleClick(tab, event) {
				console.log(tab, event);
			},
			// 人员
			upuserstags(data, checked) { //增加用户的tags(用户自组件调用)
				if (checked) {
					this.userstags.push({
						"id": data.id,
						"name": data.label
					})
				} else {
					for (var i = 0; i < this.userstags.length; i++) {
						if (this.userstags[i].id == data.id) {
							this.userstags.splice(i, 1); //删除这个tags
							break;
						}
					}
				}
			},
			// 部门
			upsectionags(data, checked) { //增加用户的tags(用户自组件调用)
				if (checked) {
					this.sectionags.push({
						"id": data.id,
						"name": data.label
					})
				} else {
					for (var i = 0; i < this.sectionags.length; i++) {
						if (this.sectionags[i].id == data.id) {
							this.sectionags.splice(i, 1); //删除这个tags
							break;
						}
					}
				}
			},
			// 岗位
			uppostags(data, checked) { //增加用户的tags(用户自组件调用)
				if (checked) {
					this.postags.push({
						"id": data.id,
						"name": data.label
					})
				} else {
					for (var i = 0; i < this.postags.length; i++) {
						if (this.postags[i].id == data.id) {
							this.postags.splice(i, 1); //删除这个tags
							break;
						}
					}
				}
			},
			// 人员
			userhandleClose(tag) { //点击用户tags右上角的叉叉
				for (var i = 0; i < this.userstags.length; i++) {
					if (this.userstags[i].id == tag) {
						this.userstags.splice(i, 1); //删除这个tags
						break;
					}
				}
				this.$refs.refuserstreeVue.upcheckdata(tag); //调用自组件的函数，修改树的数据
			},
			// 部门
			sectionhandleClose(tag) { //点击用户tags右上角的叉叉
				for (var i = 0; i < this.sectionags.length; i++) {
					if (this.sectionags[i].id == tag) {
						this.sectionags.splice(i, 1); //删除这个tags
						break;
					}
				}
				this.$refs.refsectiontreeVue.upcheckdata(tag); //调用自组件的函数，修改树的数据
			},
			// 岗位
			posthandleClose(tag) { //点击用户tags右上角的叉叉
				for (var i = 0; i < this.postags.length; i++) {
					if (this.postags[i].id == tag) {
						this.postags.splice(i, 1); //删除这个tags
						break;
					}
				}
				this.$refs.refposttreeVue.upcheckdata(tag); //调用自组件的函数，修改树的数据
			}
		},
		components: {
			usertreeVue,
			sectiontreeVue,
			posttreeVue
		}
	}
</script>

<style scoped>
	.el-tag+.el-tag {
		margin-left: 4px;
	}

	.el-tabs {
		margin-top: -34px;
	}

	.el-tag {
		position: relative;
		top: -26px;
		color: aliceblue;
	}

	.el-tabs1 {
		background-color: cornflowerblue;
	}

	.el-tabs2 {
		background-color: coral;
	}

	.el-tabs3 {
		background-color: burlywood;	
	}
</style>